<template>
    <view
        class="tab-bar fixed w-full rounded-14 left-0 mx-20 rounded-14 p-10 box-border flex-justifyBetween-itemsCenter-box"
        :class="[isSafeArea ? 'bottom-safe' : 'bottom-20']"
    >
        <!-- 跳转 -->
        <navigator
            class="flex-justifyCenter-itemsCenter-box text-primary fz-16 rounded-14 tab-box h-full"
            :class="{ 'tab-box-active': activeId === item.id }"
            v-for="item in tabBarList"
            :key="item.id"
            :url="item.path"
            hover-class="none"
            open-type="switchTab"
        >
            <!-- 图标 -->
            <text :class="['iconfont fz-22', item.icon]"/>
            <!-- 文本 -->
            <template v-if="activeId === item.id">
                <text class="ml-14 fz-14">{{ item.name }}</text>
            </template>
        </navigator>
    </view>
</template>

<script lang="ts" setup>
defineProps<{
    activeId: 1 | 2 | 3
}>()

// 导航
const tabBarList = [
	{ id: 1, name: '首页', path: '/pages/home/index', icon: 'icon-shouye' },
	{ id: 2, name: '菜谱', path: '/pages/menu/index', icon: 'icon-canting' },
	{ id: 3, name: '我的', path: '/pages/my/index', icon: 'icon-wode' }
]

// 是否有安全区
const isSafeArea = uni.getStorageSync('isSafeArea')
</script>

<style lang="less" scoped>
.tab-bar {
    width: calc(100% - 40px);
    height: 65px;
    box-shadow: rgba(0, 0, 0, 0.12) 0 10px 50px;

    .tab-box {
        width: calc((100% - 24px) / 3);
    }

    .tab-box-active {
        background: rgba(112, 185, 190, .15);
    }
}
</style>
